<div id="passApp">
    <div class="el-dialog__header">
        <button type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close" class="el-dialog__headerbtn"><i
                class="el-dialog__close el-icon el-icon-close"></i></button>
        <h4 class="modal-title">${msg['index.user.password']}</h4>
    </div>
    <div class="modal-body">
        <el-form :model="passForm" ref="passForm" :rules="passRules" label-width="100px">
            <el-form-item label="${msg['index.user.oldpass']}" prop="oldPassword">
                    <el-input size="small" maxlength="20" placeholder="${msg['index.user.oldpass']}" v-model="passForm.oldPassword"
                              auto-complete="off" tabindex="1" type="password"></el-input>
                </el-form-item>
                <el-form-item label="输入新密码" prop="newPassword">
                    <el-input size="small" maxlength="20" placeholder="${msg['index.user.newpass']}" v-model="passForm.newPassword"
                              auto-complete="off" tabindex="2" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="passwordAgain">
                    <el-input size="small" maxlength="20" placeholder="${msg['index.user.rightpass']}"
                              v-model="passForm.passwordAgain"
                              auto-complete="off" tabindex="3" type="password"></el-input>
                </el-form-item>
        </el-form>
    </div>
    <div class="el-dialog__footer">
        <span class="dialog-footer">
            <button type="button" class="el-button el-button--default" data-dismiss="modal">
                <span>${msg['system.cancel']}</span>
            </button>
            <button type="button" class="el-button el-button--primary" @click="doPass">
                <span>${msg['system.confirm']}</span>
            </button>
        </span>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#passApp',
        data: function () {
            var self = this;
            var validatePass = function (rule, value, callback) {
                if (value !== self.passForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                passForm: {
                    oldPassword: "",
                    newPassword: "",
                    passwordAgain: ""
                },
                passRules: {
                    oldPassword: [
                        {required: true, message: '请输入原密码', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 3, max: 20, message: '密码长度必须是3-20位', trigger: 'change'}
                    ],
                    passwordAgain: [
                        {required: true, message: '请再次输入新密码', trigger: 'blur'},
                        {validator: validatePass, trigger: 'change'}
                    ]
                },
            }
        },
        methods: {
            doPass: function () {
                var self = this
                self.$refs["passForm"].validate(function (valid) {
                    if (valid) {
                        $.post(base + "/platform/sys/user/doChangePassword", self.passForm, function (data) {
                            if (data.code == 0) {
                                $('#homeDetail').modal('hide');
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            }
        }
    });
</script>
